.back-img{
  position: fixed;
  left:50%;
  transform: translateX(-50%);
  top:-10%;
  width:80%;
  height:110%;
  z-index: 10;
  transition:all ease-in-out .6s;
}

.search-view{
  position: fixed;
  min-width:300px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:40%;
  transition:all ease-in-out .6s;
  z-index: 40;
}

.backer{
  left:0%;
  top:0%;
  width:100%;
  height:100%;
  background-color:rgb(248,248,248); 
  overflow-x: hidden;
  z-index:1;
}

.book-list{
  position: relative;
  top:40px;
  left:50%;
  transform: translateX(-275px);
  z-index: 20;
  transition: all .6s;
}

.pg{
  position: relative;
  width:100px;
  height:40px;
  background-color: rgb(220,57,53);
  color:white;
  bottom:0;
  z-index: 10;
  border:none;
  border-radius: 15px;
  margin-top:30px;
  margin:30px;
  cursor: pointer;
}

.bn-holder{
  transition: all .6s;
  display: flex;
  justify-content: center;
}

.pre-holder{
  transition: all .6s;
}


@media screen and (max-width:770px){
  .search-view{
    left:400px;
  }
}

@media screen and (max-width:610px){
  .search-view{
    left:50%;
    transform: translate(-50%,-20px);
  }
  .book-list{
    left:50%;
    transform: translateX(-150px);
    padding-top:60px;
  }
  .pg{
    width:60px;
    height:25px;
    border-radius: 10px;
    font-size: 10px;
  }
}